<template>
  <!-- 展示当前小程序所有状态，设置体验者，同时允许设置体验版本，撤销审核版本，回滚线上版本，设置线上版本状态，手动选择版本，自动更新开关，获取当前小程序的配置，生成导出二维码 -->
  <el-card>
    <el-row class="row-bg" justify="center">
      <el-col :offset="2" :span="10">
        <el-page-header style="margin-top: -15px" @back="goBack">
          <div slot="title">
            <div style="font-size: 16px;line-height: 50px;color: #333">返回</div>
          </div>
          <div slot="content">
            <div style="font-size: 20px;line-height: 50px;color: #333">详情</div>
          </div>
        </el-page-header>
      </el-col>
    </el-row>
    <el-row v-loading="infoLoading" class="row-bg">
      <el-col :offset="2" :span="18">
        <el-card class="box-card" shadow="never">
          <h4>基本信息</h4>
          <el-button size="medium" type="text" @click="handleRefreshInfo"><i class="el-icon-refresh" /></el-button>
          <el-row>
            <el-col :span="8">
              <div class="info-item">
                <div class="text label">小程序名称</div>
                <div class="text value">{{ account.nickName }}</div>
              </div>
              <div v-if="business" class="info-item">
                <div class="text label">商户名称</div>
                <div v-if="business" class="text value">{{ business.name }}</div>
                <div v-else class="text value">-</div>
              </div>
              <div v-if="spName" class="info-item">
                <div class="text label">服务商名称</div>
                <div class="text value">{{ spName }}</div>
              </div>

              <div v-if="privacySettingDetail" class="info-item">
                <div class="text label">隐私条款</div>
                <div class="text value" @click="handleEditPrivacy">
                  <span v-if="!privacyStatus" style="color:#F56C6C">未设置</span>
                  <span v-else>已设置</span>
                  <el-button size="medium" type="text" @click="handleEditPrivacy"><i class="el-icon-edit" /></el-button>
                </div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="info-item">
                <div class="text label">APP ID</div>
                <div class="text value">{{ wxapp.appId }}</div>
              </div>
              <div class="info-item">
                <div class="text label">授权状态</div>
                <div class="text value">{{ wxapp.state === 1? "正常": "无效授权" }}</div>
              </div>
              <div class="info-item">
                <div class="text label">自动更新</div>
                <span class="text value">
                  <el-switch
                    v-model="wxapp.autoUpdate"
                    :active-value="1"
                    :inactive-value="0"
                    @change="handleChangeAutoUpdate"
                  />
                </span>
              </div>
            </el-col>
            <el-col :span="4">
              <img :src="account.headImg" class="logo" alt="logo">
            </el-col>
          </el-row>
          <el-row />
        </el-card>
      </el-col>
    </el-row>

    <el-row class="row-bg online-container">
      <el-col :offset="2" :span="18">
        <el-card class="box-card" shadow="never">
          <h4>线上版本</h4>
          <el-container v-if="wxapp.onlineVersionId !== 0">
            <el-aside width="110px">
              <div class="info-item">
                <div class="text label">版本号</div>
                <div class="text value version">{{ onlineVersion.versionNum }}</div>
                <span class="status_tag info" @click="handleCommonCode">线上版<i class="icon_code_qrcode">扫描访问</i></span>
              </div>
            </el-aside>
            <el-main>
              <div style="display: inline-block">
                <div class="info-item">
                  <span class="text label">状态 </span>
                  <span class="text value">{{ wxapp.onlineStatus === 1 ? '正常': '已下架' }}</span>
                </div>

                <div class="info-item">
                  <span class="text label" style="margin-top: 10px">发布时间 </span>
                  <span class="text value">{{ wxapp.onlineTime }}</span>
                </div>

                <div class="info-item">
                  <span class="text label" style="margin-top: 10px">描述 </span>
                  <span class="text value">{{ onlineVersion.updateMsg }}</span>
                </div>
              </div>
              <div style="float: right">
                <el-dropdown @command="handleOnlineCommand">
                  <el-button size="medium" type="primary">功能管理<i class="el-icon-arrow-down el-icon--right" />
                  </el-button>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="qrcodeMgr">二维码生成</el-dropdown-item>
                    <el-dropdown-item command="wxappUrlMgr">H5跳转URL</el-dropdown-item>
                    <el-dropdown-item command="onlineStatus">{{ wxapp.onlineStatus === 1? "下架": "上架" }}
                    </el-dropdown-item>
                    <el-dropdown-item command="versionBack">版本回退</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
            </el-main>
          </el-container>
          <div v-else class="empty-container">尚未提交线上版本</div>
        </el-card>
      </el-col>
    </el-row>

    <el-row class="row-bg" style="margin-top: 30px">
      <el-col :offset="2" :span="18">
        <el-card v-loading="auditLoading" class="box-card" shadow="never">
          <h4>审核版本</h4>
          <el-container v-if="wxapp.auditVersionId !== 0">
            <el-aside width="110px">
              <div class="info-item">
                <div class="text label">版本号</div>
                <div class="text value version">{{ auditVersion.versionNum }}</div>
              </div>

              <!--<span @click="handlePreviewCode" class="status_tag info">体验版<i class="icon_code_qrcode">扫描访问体验版</i></span>-->
            </el-aside>

            <el-main>
              <div style="display: inline-block">
                <div class="info-item">
                  <span class="text label">审核状态 </span>
                  <el-tag v-if="wxapp.auditStatus === 1" type="danger">审核不通过</el-tag>
                  <span v-if="wxapp.auditStatus === 0" class="text value">审核通过</span>
                  <span v-if="wxapp.auditStatus === 2" class="text value">审核中</span>
                  <span v-if="wxapp.auditStatus === 3" class="text value">已撤回</span>
                  <span v-if="wxapp.auditStatus === 4" class="text value">审核延迟</span>
                </div>
                <div class="info-item">
                  <span class="text label">提交时间 </span>
                  <span class="text value">{{ wxapp.auditTime }}</span>
                </div>
                <div v-if="wxapp.auditStatus !== 1" class="info-item">
                  <span class="text label" style="margin-top: 10px">描述 </span>
                  <span class="text value">{{ auditVersion.updateMsg }}</span>
                </div>

                <div v-else class="info-item">
                  <span class="text label" style="margin-top: 10px">原因 </span>
                  <span class="text value" style="white-space: pre-wrap;line-height: 2">{{ wxapp.auditMsg }}</span>
                </div>
              </div>
              <div style="float: right">
                <el-button size="medium" :disabled="wxapp.auditStatus !== 2" type="danger" @click="handleUnDoAudit">
                  撤销审核
                </el-button>
                <el-dropdown @command="handleAuditCommand">
                  <el-button size="medium" type="primary" style="margin-left:10px;padding: 10px 12px"><i
                    class="el-icon-arrow-down"
                  />
                  </el-button>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="refresh">刷新状态</el-dropdown-item>
                    <el-dropdown-item command="speedup">加急审核</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
                <div v-if="quota" class="info-item" style="margin-top: 10px;margin-left: 5px">
                  <div class="text label">加急额度</div>
                  <div class="text value" style="display: inline-block">{{ quota.speedupRest }} / {{ quota.speedupLimit
                  }}
                  </div>
                </div>
              </div>
            </el-main>
          </el-container>
          <div v-else class="empty-container">暂无提交审核的版本</div>
        </el-card>
      </el-col>
    </el-row>

    <el-row class="row-bg" style="margin-top: 30px;margin-bottom: 60px">
      <el-col :offset="2" :span="18">
        <el-card v-loading="submitLoading" class="box-card" shadow="never">
          <h4>开发版本</h4>
          <el-container v-if="wxapp.previewVersionId !== 0">
            <el-aside width="110px">
              <div class="info-item">
                <div class="text label">版本号</div>
                <div class="text value version">{{ previewVersion.versionNum }}</div>
                <span class="status_tag info" @click="handlePreviewCode">体验版<i
                  class="icon_code_qrcode"
                >扫描访问体验版</i></span>
              </div>
            </el-aside>
            <el-main>
              <div style="display: inline-block">
                <div class="info-item">
                  <span class="text label">提交时间 </span>
                  <span class="text value">{{ wxapp.previewVersionTime }}</span>
                </div>
                <div class="info-item">
                  <span class="text label" style="margin-top: 10px">描述 </span>
                  <span class="text value">{{ previewVersion.updateMsg }}</span>
                </div>
              </div>
              <div style="float: right">
                <el-button
                  size="medium"
                  :disabled="wxapp.auditVersionId !== 0 && wxapp.auditStatus === 2"
                  type="primary"
                  style="margin-right: 10px"
                  @click="handleAudit"
                >提交审核
                </el-button>
                <el-dropdown @command="handleCommand">
                  <el-button size="medium" type="primary" style="padding: 10px 12px"><i class="el-icon-arrow-down" />
                  </el-button>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="version">切换版本</el-dropdown-item>
                    <el-dropdown-item command="tester">设置体验者</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>

                <div v-if="quota" class="info-item" style="margin-top: 10px;margin-left: 5px">
                  <div class="text label">当月额度</div>
                  <div class="text value" style="display: inline-block">{{ quota.rest }} / {{ quota.limit }}</div>
                </div>
              </div>
            </el-main>
          </el-container>
          <div v-else class="empty-container">
            <div style="text-align: center">
              <div>暂无提交开发版本，设置为
                <el-button type="text" @click="handleAutoVersion">当前最新版本</el-button>
                ，或
                <el-button type="text" @click="handleChangeVersion">指定版本</el-button>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <gen-wxapp-url-dialog ref="genWxappUrlDialog" />
    <select-version-dialog ref="selectVersionDialog" />
    <bind-tester ref="bindTester" />
    <gen-qrcode-dialog ref="genQrcodeDialog" />
    <re-audit-dialog ref="reAuditDialog" />
    <wxapp-privacy-dialog ref="privacyDialog" />
  </el-card>
</template>

<script>
/* eslint-disable no-console */
import SelectVersionDialog from '../components/SelectVersionDialog'
import GenQrcodeDialog from '../components/GenQrcodeDialog'
import GenWxappUrlDialog from '../components/GenWxappUrlDialog'
import BindTester from '../components/BindTester'
import ReAuditDialog from '../components/ReAuditDialog'
import WxappPrivacyDialog from '../components/WxappPrivacyDialog'
import {
  getVersion,
  getWxappInfo,
  refreshWxappInfo,
  getPreviewQrcode,
  getWxappQrcode,
  setPreviewVersion,
  submitAudit,
  speedupAudit,
  getAuditQuota,
  undoCodeAudit,
  changeAutoUpdate,
  revertCodeRelease,
  refreshAuditStatus,
  changeVisitStatus,
  reSubmitAudit, getPrivacySetting
} from '@/api/wxapp'

export default {
  name: 'WxappDetail',
  components: {
    SelectVersionDialog,
    GenQrcodeDialog,
    GenWxappUrlDialog,
    BindTester,
    WxappPrivacyDialog,
    ReAuditDialog
  },
  props: {
    wxappRelationId: {
      require: true
    }
  },
  data() {
    return {
      account: {
        headImg: '',
        nickName: ''
      },
      previewVersion: {},
      auditVersion: {},
      onlineVersion: {},
      previewQrcode: '',
      qrcode: '',
      auditLoading: false,
      infoLoading: false,
      submitLoading: false,
      business: {},
      spName: null,
      quota: {},
      privacySettingDetail: null,
      privacyStatus: false,
      wxapp: {
        appId: '',
        businessId: '',
        auditMsg: '',
        classifyId: '',
        onlineVersionId: 0,
        onlineVersion: '',
        onlineVersionUpdateMsg: '',
        onlineTime: '',
        onlineStatus: '',
        auditVersionId: 0,
        auditVersion: '',
        auditVersionUpdateMsg: '',
        auditStatus: '',
        previewVersionId: 0,
        auditTime: '',
        qrcode: '',
        autoUpdate: '',
        previewQrcode: ''
      }
    }
  },
  mounted() {
    this.getWxappDetail()
  },

  methods: {
    goBack() {
      this.$router.back()
    },
    getPrivacy() {
      getPrivacySetting(this.wxapp.appId, 2).then(res => {
        this.privacySettingDetail = res.data
        const ownerSetting = this.privacySettingDetail.ownerSetting
        this.privacyStatus = !!(ownerSetting.contactWeixin || ownerSetting.contactQQ || ownerSetting.contactPhone ||
            ownerSetting.contactEmail)
        console.info('privacySettingDetail', this.privacySettingDetail)
        console.info('privacyStatus', this.privacyStatus)
      })
    },
    getWxappDetail() {
      getAuditQuota(this.wxappRelationId).then(resp => {
        if (resp.code === 0) {
          this.quota = resp.data
          console.info(this.quota)
        }
      })
      return getWxappInfo(this.wxappRelationId).then((resp) => {
        this.account = resp.data.account
        const wxapp = resp.data.wxapp
        if (wxapp.auditMsg) {
          wxapp.auditMsg = wxapp.auditMsg.replace(new RegExp('<br>', 'g'), '\n')
        }

        this.wxapp = resp.data.wxapp
        this.getPrivacy()

        this.business = resp.data.business
        this.spName = resp.data.spName

        if (this.wxapp.previewVersionId) {
          this.getVersionDetail(this.wxapp.previewVersionId).then(data => {
            this.previewVersion = data
          })
        }
        if (this.wxapp.auditVersionId !== 0) {
          this.getVersionDetail(this.wxapp.auditVersionId).then(data => {
            this.auditVersion = data
          })
        }
        if (this.wxapp.onlineVersionId !== 0) {
          this.getVersionDetail(this.wxapp.onlineVersionId).then(data => {
            this.onlineVersion = data
          })
        }
      })
    },
    getPreviewQrcode() {
      return getPreviewQrcode(this.wxapp.appId).then((resp) => {
        this.previewQrcode = resp.data
      })
    },
    getCommonQrcode() {
      return getWxappQrcode(this.wxapp.appId).then((resp) => {
        this.qrcode = resp.data
      })
    },

    getVersionDetail(versionId) {
      return getVersion(versionId).then((resp) => {
        return resp.data
      })
    },

    setPreviewVersion(versionId) {
      const data = {
        wxappRelationId: this.wxappRelationId,
        versionId: versionId
      }
      setPreviewVersion(data).then((resp) => {
        this.getWxappDetail()
      })
    },
    handleRefreshInfo() {
      this.infoLoading = true
      refreshWxappInfo(this.wxappRelationId).then((resp) => {
        this.infoLoading = false
        if (resp.code === 0) {
          this.getWxappDetail().then(() => {
            this.$notify({ title: '成功', message: '刷新成功', type: 'success', duration: 2000 })
          })
        }
      }).catch(() => {
        this.infoLoading = false
      })
    },

    handleRefreshAudit() {
      this.auditLoading = true
      refreshAuditStatus(this.wxappRelationId).then((resp) => {
        this.auditLoading = false
        if (resp.code === 0) {
          this.getWxappDetail().then(() => {
            this.$notify({ title: '成功', message: '刷新成功', type: 'success', duration: 2000 })
          })
        }
      }).catch(() => {
        this.auditLoading = false
      })
    },
    handleCommand(command) {
      if (command === 'version') {
        this.handleChangeVersion()
      } else if (command === 'tester') {
        this.handleBindTester()
      }
    },
    handleAuditCommand(command) {
      if (command === 'refresh') {
        this.handleRefreshAudit()
      } else if (command === 'speedup') {
        this.handleSpeedupAudit()
      }
    },

    handleChangeVersion() {
      this.$refs.selectVersionDialog.show(this.wxapp.classifyCode, this.wxapp.templateCode).then((resp) => {
        this.setPreviewVersion(resp.id)
      })
    },

    handleBindTester() {
      this.$refs.bindTester.show(this.wxapp.appId)
    },
    handleAudit() {
      this.$refs.reAuditDialog.open(this.wxapp.appId).then(res => {
        console.info('res', res)
        this.submitLoading = true
        reSubmitAudit({
          wxappRelationId: this.wxappRelationId,
          feedbackInfo: res.feedbackInfo,
          feedbackStuff: res.feedbackStuff
        }).then((resp) => {
          this.submitLoading = false
          this.$notify({ title: '成功', message: '提审成功', type: 'success', duration: 2000 })
          this.getWxappDetail()
        }).catch(() => {
          this.submitLoading = false
        })
      })
    },
    handleUnDoAudit() {
      this.$confirm('每天审核撤回次数最多不超过1次，一个月不超过10次，确定撤销审核？', '温馨提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        undoCodeAudit(this.wxappRelationId).then((resp) => {
          if (resp.code === 0) {
            this.getWxappDetail()
          }
        })
      }).catch(() => {
      })
    },
    handleSpeedupAudit() {
      if (this.quota && this.quota.speedupRest && Number(this.quota.speedupRest) >= 0) {
        this.$confirm(`当前剩余加急额度为${this.quota.speedupRest}, 是否进行加急审核？`, '温馨提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          speedupAudit(this.wxappRelationId).then((resp) => {
            if (resp.code === 0) {
              this.$notify({ title: '成功', message: '申请加急审核成功', type: 'success', duration: 2000 })
              this.getWxappDetail()
            }
          })
        }).catch(() => {
        })
      } else {
        this.$notify({ title: '错误', message: '缺少加急审核额度', type: 'error', duration: 2000 })
      }
    },
    handleCommonCode() {
      if (this.qrcode) {
        this.$alert('<img width="300px" height="300px" src="' + this.qrcode + '" />', '小程序码', {
          dangerouslyUseHTMLString: true,
          center: true
        })
      } else {
        this.getCommonQrcode().then(() => {
          this.$alert('<img width="300px" height="300px" src="' + this.qrcode + '" />', '小程序码', {
            dangerouslyUseHTMLString: true,
            center: true
          })
        })
      }
    },

    handlePreviewCode() {
      if (this.previewQrcode) {
        this.$alert('<img width="300px" height="300px" src="' + this.previewQrcode + '" />', '体验码', {
          dangerouslyUseHTMLString: true,
          center: true
        })
      } else {
        this.getPreviewQrcode().then(() => {
          this.$alert('<img width="300px" height="300px" src="' + this.previewQrcode + '" />', '体验码', {
            dangerouslyUseHTMLString: true,
            center: true
          })
        })
      }
    },
    handleOnlineCommand(command) {
      if (command === 'onlineStatus') {
        const tag = this.wxapp.onlineStatus === 1 ? '下架' : '上架'
        const status = this.wxapp.onlineStatus === 1 ? 0 : 1

        this.$confirm('确定' + tag + '？', '温馨提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'info'
        }).then(() => {
          changeVisitStatus({ wxappRelationId: this.wxappRelationId, status: status }).then((resp) => {
            this.getWxappDetail()
          })
        }).catch(() => {

        })
      } else if (command === 'qrcodeMgr') {
        this.$refs.genQrcodeDialog.show(this.wxapp.appId)
      } else if (command === 'wxappUrlMgr') {
        this.$refs.genWxappUrlDialog.show(this.wxapp.appId)
      } else if (command === 'versionBack') {
        this.handleVersionBack()
      }
    },
    handleVersionBack() {
      this.$confirm('该功能仅允许紧急情况下使用，操作成功后，系统记录版本信息并不会更新，确定进行？', '温馨提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      }).then(() => {
        revertCodeRelease(this.wxappRelationId).then((resp) => {
          this.$notify({ title: '成功', message: '回退版本成功', type: 'success', duration: 2000 })
          this.getWxappDetail()
        })
      }).catch(() => {
        this.submitLoading = false
      })
    },
    handleEditPrivacy() {
      this.$refs.privacyDialog.open(this.wxapp.appId, this.privacySettingDetail).then(res => {
        // 刷新协议
        this.getPrivacy()
      })
    },
    handleChangeAutoUpdate(val) {
      changeAutoUpdate({
        wxappRelationId: this.wxappRelationId,
        status: val
      }).then(res => {
        if (val === 1) {
          this.$notify({ title: '提示', message: '自动更新已开启', type: 'success', duration: 2000 })
        } else {
          this.$notify({ title: '警告', message: '自动更新已关闭', type: 'error', duration: 2000 })
        }
        this.getWxappDetail()
      })
    },
    handleAutoVersion() {
      this.$confirm('确定更新到最新版本？', '温馨提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      }).then(() => {
        this.setPreviewVersion(0).then(() => {
          this.$notify({ title: '成功', message: '设置成功', type: 'success', duration: 2000 })
          this.loading = false
        })
      }).catch(() => {
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  * {
    box-sizing: border-box;
  }

  .box-card {
    min-width: 600px;
    text-align: left;
  }

  h2 {
    font-weight: 400;
  }

  .box-card .item {
    line-height: 30px;
  }

  .box-card h4 {
    font-weight: 400;
    margin: 0;
  }

  .box-card h4 {
    font-weight: 400;
    font-size: 18px;
    margin-bottom: 15px;
    display: inline-block;
    margin-right: 20px;
    padding: 0;
  }

  .info-item {
    margin-bottom: 10px;

    &:last-child {
      margin-bottom: 10px;
    }

    .text {
      line-height: 1.6;
    }

    .label {
      color: #9a9a9a;
      font-size: 14px;
      line-height: 1.6;
      display: inline-block;
      width: 80px;
    }

    .version {
      font-size: 18px !important;
      line-height: 2;
    }

    .value {
      color: #000;
      font-size: 16px;
    }
  }

  .box-card {
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 1px 2px rgba(150, 150, 150, 0.3);
    padding: 20px 30px 30px;
  }

  .el-main {
    padding: 0;
  }

  .icon_code_qrcode {
    cursor: pointer;
    width: 12px;
    height: 12px;
    vertical-align: middle;
    display: inline-block;
    line-height: 300px;
    overflow: hidden;
    margin-top: -2px;
    margin-left: 3px;
  }

  .status_tag.info {
    color: $btnBgc;
    border: 1px solid $btnBgc;
    font-size: 12px;
  }

  .status_tag {
    font-size: 12px;
    padding: 2px;
    border-radius: 2px;
    display: inline-block;
    line-height: 1;
    vertical-align: middle;
    margin-top: -0.2em;
    cursor: pointer;
  }

  .empty-container {
    height: 180px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    color: #9a9a9a;
  }

  .logo {
    width: 128px;
    height: 128px;
  }

  .online-container {
    margin-top: 30px
  }

	.el-button--primary{
		background-color: $btnBgc;
		border: none;
	}
	.el-dropdown-menu__item:not(.is-disabled):hover, .el-dropdown-menu__item:focus{
		color: $btnBgc;
		background-color: $overBgc;
	}

</style>
